<template>
  <div class="oeder">
    <van-nav-bar title="订单" />
    <van-tabs v-model="active" @click="tabChange">
      <van-tab :title="item.name" v-for="(item,index) in types" :key="index"></van-tab>
    </van-tabs>
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getList">
      <div class="service_list">
        <div class="lists">
          <router-link tag="div" :to="{path:`/order/good/${item.orderNo}`}" class="home_service__item " v-for="(item ,index) in dataList" :key="index">
            <div class="title van-hairline--bottom row-between-center">
              <span>订单编号：{{item.orderNo}}</span>
              <span class="status">{{item.orderStatus | orderStatus}}</span>
            </div>
            <div class="conetnt">
              <div class="flex">
                <div class="bg" :class="['type1']" :style="{backgroundImage:`url(${item.orderType == 'GOOD' ? item.goodImg : item.packageImg})`}"></div>
                <div class="infor">
                  <h4 class="name">{{item.orderType == 'GOOD' ?  item.goodsName : item.packageName}}</h4>
                  <p class="descp" v-if="item.serviceName">服务项目：{{item.serviceName}}</p>
                  <p class="descp">创建时间：{{item.orderTime}}</p>
                </div>
              </div>
              <h4 class="price">支付：<span>{{item.realPrice}}</span></h4>
              <div class="btns">
                <span class="btn_white" v-if="item.orderStatus == 0" @click.stop="setCancle(item)">取消订单</span>
                <router-link tag="span" :to="{path:`/pay/${item.orderNo}`}" class="btn_blue" v-if="item.orderStatus == 0">立即付款</router-link>
                <router-link tag="span" :to="{path:`/invoice/select/${item.id}`}" class="btn_white" v-if="item.orderStatus == 1 && item.invoiceStatus == 0">开发票</router-link>
                <router-link tag="span" :to="{path:`/order/detail/evaluate/${item.id}`}" class="btn_blue" v-if="item.evaStatus == 0 && item.orderStatus == 2">评价</router-link>
				<!-- <span class="btn_blue"  v-on:click.stop="pinj(item.orderNo)" v-if="item.orderStatus == 2">评价</span> -->
              </div>
            </div>
          </router-link>
        </div>
      </div>
    </van-list>

    <van-popup v-model="showCancle" position="bottom">
      <div class="order_cancle">
        <h4 class="title">取消订单</h4>
        <p class="tips">请填写选择取消订单原因</p>
        <ul>
          <van-radio-group v-model="cancleFrom.description">
            <li class="row-between-center van-ellipsis">
              <span>我不需要了</span>
              <van-radio name="我不需要了"></van-radio>
            </li>
            <li class="row-between-center van-ellipsis">
              <span>信息填写错误，重新下单</span>
              <van-radio name="信息填写错误，重新下单"></van-radio>
            </li>
            <li class="row-between-center van-ellipsis">
              <span>其他原因</span>
              <van-radio name="其他原因"></van-radio>
            </li>
          </van-radio-group>
          <div class="btn" @click="doCancle">确定取消</div>
        </ul>
      </div>
    </van-popup>
  </div>
</template>

<script>
import api from 'api/api'
import { mapState,mapMutations } from 'vuex'
export default {
  data () {
    return {
      active: 0,
      loading: false,
      finished: false,
      form: {
        data: {
          orderStatus: 0,
        },
        page: 0
      },
      cancleFrom: {
        id: '',
        description: ''
      },
      code: 0,
      types: [
        { name: '全部', id: '', },
        { name: '待付款', id: 0, },
        { name: '已付款', id: 1, },
        { name: '已完成', id: 2, },
        { name: '取消', id: 3, },

      ],
      dataList: [],
      pages: 0,
      showCancle: false
    }
  },
  computed: {
    ...mapState(['categoryList'])
  },
  filters: {
    orderStatus (val) {
      let status = ['待付款', '已付款', '已完成', '取消']
      return status[val]
    }
  },
  created () {
    this.getList()
	console.log(this.$route.query.active)
	this.active=this.$route.query.active
	
  },
  methods: {
	// pinj(path){
	// 	console.log(path)
	// 	this.$router.push('/order/detail/evaluate/'+path)
	// },
    getList () {
		console.log('加载了。。。。')
		
      // if (!this.finished && !this.loading) {
        this.loading = true;
        this.form.data.orderStatus = this.types[this.active].id
        this.form.page++
        api.orderList(this.form).then(res => {
			
          this.loading = false;
          this.dataList = this.dataList.concat(res.data.records)
		  console.log('orders', this.dataList)
		  // return
          this.pages = res.data.pages
          if (this.form.page > this.pages - 1) {
            this.finished = true
          }
        })
      // }
    },
    tabChange () {
      console.log(this.active)
	  // return
      this.dataList = []
      this.form.page = 0
      this.loading = false
      this.finished = false
      this.getList()
    },
    toDetail (item, type) {
      this.$router.push('/service/' + type + '/' + item.id)
    },
    setCancle (item) {
      this.cancleFrom.id = item.id
      this.showCancle = true
    },
    doCancle () {
      if (!this.cancleFrom.description) {
        this.$toast('请选择取消原因')
        return
      }
      api.ordercancel({
        data: this.cancleFrom
      }).then(res => {
        this.showCancle = false
        this.dataList = []
        this.form.page = 0
        this.loading = false
        this.finished = false
        this.getList()
      })
    },
    back () {
      window.history.go(-1)
    }
  }
}
</script>

<style lang="scss">
.oeder {
  .van-tabs__line {
    background-color: #348aff;
  }
  .service_list {
    padding: 0.3rem;
    .lists {
      .home_service__item {
        width: 6.9rem;
        margin-bottom: 0.21rem;
        min-height: 3.14rem;
        box-shadow: #eee 0.02rem 0.02rem 0.1rem;
        .title {
          color: #333;
          font-size: 0.22rem;
          line-height: 0.6rem;
          padding: 0 0.2rem;
          .status {
            color: #ff7a19;
          }
        }
        .conetnt {
          padding: 0.2rem;
        }
        .bg {
          width: 1.19rem;
          height: 1.19rem;
          background-size: cover;
          background-position: center;
        }
        .infor {
          width: 5.02rem;
          text-align: left;
          padding: 0 0.2rem;
          .name {
            font-size: 0.38rem;
            line-height: 1;
            margin-bottom: 0.07rem;
          }
          .descp {
            font-size: 0.22rem;
            color: #666;
            margin-top: 0.2rem;
            line-height: 1;
          }
        }
        .price {
          font-size: 0.3rem;
          text-align: right;
          span {
            color: #ff344c;
          }
        }
        .btns {
          display: flex;
          justify-content: flex-end;
          margin-top: 0.36rem;
          span {
            margin-left: 0.25rem;
          }
          .btn_white {
            width: 1.27rem;
            line-height: 0.4rem;
            text-align: center;
            border: 1px solid rgba(153, 153, 153, 1);
            border-radius: 0.2rem;
            font-size: 0.22rem;
            color: #999;
          }
          .btn_blue {
            width: 1.27rem;

            line-height: 0.4rem;
            text-align: center;
            border: 1px solid 348aff;
            border-radius: 0.2rem;
            background-color: #348aff;
            font-size: 0.22rem;
            color: #fff;
          }
        }
      }
    }
  }
  .order_cancle {
    padding: 0.3rem;
    .title {
      font-size: 0.3rem;
    }
    .tips {
      font-size: 0.22rem;
      color: #999;
      text-align: left;
      margin: 0.47rem 0 0.2rem 0;
    }
    li {
      line-height: 0.93rem;
      font-size: 0.26rem;
    }
    .btn {
      width: 6.9rem;
      line-height: 0.76rem;
      background: linear-gradient(
        96deg,
        rgba(72, 143, 240, 1),
        rgba(51, 130, 239, 1)
      );
      text-align: center;
      border-radius: 0.38rem;
      font-size: 0.36rem;
      color: #fff;
      margin: 0.38rem 0;
    }
  }
}
</style>